<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">

<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
	<meta name="description" content=""/>
	<meta name="keywords" content="" />
	<meta name="author" content="" />
	<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
	<title>Website Template: Simple Magazine - Style Demo (demo)</title>
</head>

<body id="top">

<div id="network">
	<div class="center-wrapper">

		<div class="left">Sunday, August 2, 2009 <span class="text-separator">|</span> <span class="quiet">794 users online</span></div>
		<div class="right">

			<ul class="tabbed" id="network-tabs">
				<li class="current-tab"><a href="#">Simple Magazine</a></li>
				<li><a href="#">Network site</a></li>
				<li><a href="#">Network site 2</a></li>
			</ul>

			<div class="clearer">&nbsp;</div>
		
		</div>
		
		<div class="clearer">&nbsp;</div>

	</div>
</div>

<div id="site">
	<div class="center-wrapper">

		<div id="header">

			<div class="right" id="toolbar">
				Text size <a href="#" title="Larger text"><img src="img/icon-plus.gif" width="20" height="20" alt="" /></a> <a href="#" title="Smaller text"><img src="img/icon-minus.gif" width="20" height="20" alt="" /></a>
			</div>

			<div class="clearer">&nbsp;</div>

			<div id="site-title">

				<h1><a href="#">Simple Magazine</a> <span> / News</span></h1>

			</div>

			<div id="navigation">
				
				<div id="main-nav">

					<ul class="tabbed">
						<li class="current-tab"><a href="#">News</a></li>
						<li><a href="#">Politics</a></li>
						<li><a href="#">Culture</a></li>
						<li><a href="#">Sport</a></li>
						<li><a href="#">Debate</a></li>
						<li><a href="#">Entertainment</a></li>
					</ul>

					<div class="clearer">&nbsp;</div>

				</div>

				<div id="sub-nav">

					<ul class="tabbed">
						<li><a href="index.html">Frontpage</a></li>
						<li class="current-tab"><a href="style-demo.html">Style Demo</a></li>
						<li><a href="two-columns.html">Two Columns</a></li>
						<li><a href="single-column.html">Single Column</a></li>						
						<li><a href="archives.html">Archives</a></li>
						<li><a href="empty-page.html">Empty Page</a></li>
					</ul>

					<div class="clearer">&nbsp;</div>

				</div>

			</div>

		</div>

		<div class="main" id="main-three-columns">

			<div class="left" id="main-left">

				<div class="post">

					<div class="post-body">

						<h1>Heading 1</h1>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

						<h2>Heading 2</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

						<h3>Heading 3</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

						<h4>Heading 4</h4>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

						<h5>Heading 5</h5>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

						<h6>Heading 6</h6>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

						<div class="content-separator"></div>
						
						<h2>Images in text</h2>

						<p>Curabitur faucibus risus quis lectus. <a href="#">Donec vehicula</a>. Pellentesque nec, lectus. Nullam dictum sem. Phasellus varius. Vestibulum in felis in mauris consequat molestie</p>

						<img src="sample-thumbnail.jpg" width="75" height="75" alt="" class="alignleft" />

						<p>Consectetur adipiscing elit. In nisi. Duis condimentum est nec augue blandit scelerisque. Phasellus varius. Vestibulum in felis in mauris consequat molestie. Sem nec pellentesque condimentum, turpis massa ultricies nisi, at molestie justo eros ac velit.</p>

						<img src="sample-thumbnail.jpg" width="75" height="75" alt="" class="alignright" />

						<p>Curabitur euismod mi ac neque. Cras vel tortor molestie <a href="#">tortor luctus</a> facilisis. Nulla a nunc. Vivamus est. Integer ac sem quis ipsum dignissim sodales. Nam pulvinar sem eu nibh. Suspendisse non nulla et ligula bibendum facilisis. Suspendisse potenti. Vivamus leo.</p>

						<p>Nulla lacus tortor, ornare vitae, vulputate vitae, sed quis magna. Pellentesque urna urna, bibendum non, ornare in, sollicitudin quis, est.</p>

						<div class="clearer">&nbsp;</div>

						<div class="content-separator"></div>

						<h2>Messages</h2>

						<div class="success">Success!</div>

						<div class="notice">Notice</div>

						<div class="error">Error..</div>

						<div class="content-separator"></div>

						<h2>Blockquote</h2>

						<blockquote>
							<p>Praesent orci nisi, interdum quis, tristique vitae, consectetur sed, arcu. Ut at sapien non dolor semper sollicitudin. Etiam semper erat quis odio. Quisque commodo suscipit velit. Nulla facilisi.</p>
							<p><cite>- Duis justo quam</cite></p>
						</blockquote>

						<div class="content-separator"></div>

						<h2>Lists</h2>

						<h3>Unsorted list</h3>
						<ul>
							<li>Blandit in, interdum a</li>
							<li>Ultrices non lectus</li>
							<li>Nunc id odio</li>
							<li>Fusce ultricies</li>
						</ul>

						<h3>Ordered list</h3>
						<ol>
							<li>Blandit in, interdum a</li>
							<li>Ultrices non lectus</li>
							<li>Nunc id odio</li>
							<li>Fusce ultricies</li>
						</ol>

						<h3>Definition list</h3>

						<dl>
							<dt>title</dt>
							<dd>definition</dd>
							<dd>definition</dd>
							<dt>title</dt>
							<dt>title</dt>
							<dd>definition</dd>
							<dt>title</dt>
							<dd>definition</dd>
						</dl>

						<div class="content-separator"></div>

						<h2>Tables</h2>

						<h3>Data table</h3>

						<table class="data-table">
							<tr>
								<th>Property 1</th>
								<th>Property 2</th>
								<th>Property 3</th>
								<th>Property 4</th>
							</tr>
							<tr class="even">
								<td>Value 1.1</td>
								<td>Value 1.2</td>
								<td>Value 1.3</td>
								<td>Value 1.4</td>
							</tr>
							<tr>
								<td>Value 2.1</td>
								<td>Value 2.2</td>
								<td>Value 2.3</td>
								<td>Value 2.4</td>
							</tr>
							<tr class="even">
								<td>Value 3.1</td>
								<td>Value 3.2</td>
								<td>Value 3.3</td>
								<td>Value 3.4</td>
							</tr>
							<tr>
								<td>Value 4.1</td>
								<td>Value 4.2</td>
								<td>Value 4.3</td>
								<td>Value 4.4</td>
							</tr>
						</table>

					</div>
				
				</div>
				
			</div>

			<div class="left sidebar" id="sidebar-1">

				<div class="post">

					<p><a href="#"><img src="news-image-small-1.jpg" alt="" class="bordered" /></a></p>

					<h3><a href="#">Article title</a></h3>

					<p>Integer diam elit, condimentum ac semper ut, tincidunt non diam. Ut congue rutrum justo at commodo. Aenean euismod tincidunt lorem scelerisque euismod.</p>

					<a href="#" class="more">Read more &#187;</a>

				</div>

				<div class="content-separator"></div>

				<div class="post">

					<p><a href="#"><img src="news-image-small-2.jpg" alt="" class="bordered" /></a></p>

					<h3><a href="#">Second Article Title</a></h3>

					<p>Sed congue lacinia leo, sed dignissim odio pharetra vel. Fusce a dignissim dui. Fusce semper porttitor enim dapibus venenatis.</p>

					<a href="#" class="more">Read more &#187;</a>

				</div>

				<div class="content-separator"></div>

				<div class="post">

					<h3><a href="#">Third title</a></h3>

					<p>Sed auctor hendrerit eros eu eleifend. Cras hendrerit iaculis sodales. Pellentesque interdum rhoncus magna.</p>

					<a href="#" class="more">Read more &#187;</a>

				</div>				

			</div>

			<div class="right sidebar" id="sidebar-2">

				<div class="section">

					<div class="section-title">

						<div class="left">Latest News</div>
						<div class="right"><img src="img/icon-time.gif" width="14" height="14" alt="" /></div>

						<div class="clearer">&nbsp;</div>

					</div>

					<div class="section-content">

						<ul class="nice-list">
							<li>
								<div class="left"><a href="#">Aenean tempor arcu..</a></div>
								<div class="right">20.49</div>
								<div class="clearer">&nbsp;</div>
							</li>
							<li>
								<div class="left"><a href="#">Justo interdum rutrum</a></div>
								<div class="right">20:40</div>
								<div class="clearer">&nbsp;</div>
							</li>
							<li>
								<div class="left"><a href="#">In nec justo in urna</a></div>
								<div class="right">19:56</div>
								<div class="clearer">&nbsp;</div>
							</li>
							<li>
								<div class="left"><a href="#">Accumsan condimentum</a></div>
								<div class="right">19:15</div>
								<div class="clearer">&nbsp;</div>
							</li>
							<li>
								<div class="left"><a href="#">Etiam commodo bibendum</a></div>
								<div class="right">19:06</div>
								<div class="clearer">&nbsp;</div>
							</li>
							<li>
								<div class="left"><a href="#">Mauris euismod justo</a></div>
								<div class="right">18:51</div>
								<div class="clearer">&nbsp;</div>
							</li>
							<li><a href="#" class="more">Browse all &#187;</a></li>
						</ul>

					</div>

				</div>

				<div class="section">

					<div class="section-title">Most Viewed</div>

					<div class="section-content">

						<ul class="nice-list">
							<li><span class="quiet">1.</span> <a href="#">Integer diam elit</a></li>
							<li><span class="quiet">2.</span> <a href="#">Condimentum ac semper</a></li>
							<li><span class="quiet">3.</span> <a href="#">Tincidunt non diam</a></li>
							<li><span class="quiet">4.</span> <a href="#">Ut congue rutrum</a></li>
							<li><span class="quiet">5.</span> <a href="#">Enim dapibus venenatis</a></li>
							<li><span class="quiet">6.</span> <a href="#">Cras hendrerit iaculis</a></li>
							<li><span class="quiet">7.</span> <a href="#">Duis mi lectus</a></li>
							<li><span class="quiet">8.</span> <a href="#">Eleifend nec tortor</a></li>
							<li><a href="#" class="more">Browse all &#187;</a></li>
						</ul>
						
					</div>

				</div>

				<div class="section network-section">

					<div class="section-title">Network News</div>

					<div class="section-content">

						<ul class="nice-list">
							<li><a href="#">Nullam eros</a></li>
							<li><a href="#">Eleifend nec tortor</a></li>
							<li><a href="#">Duis mi lectus</a></li>
							<li><a href="#">Integer diam elit</a></li>
							<li><a href="#">Enim dapibus venenatis</a></li>
							<li><a href="#" class="more">Visit Network Site &#187;</a></li>
						</ul>
						
					</div>

				</div>

			</div>

			<div class="clearer">&nbsp;</div>

		</div>

		<div id="dashboard">

			<div class="column left" id="column-1">
				
				<div class="column-content">
				
					<div class="column-title">About Simple Magazine</div>

					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

					<a href="#">Learn more &#187;</a>

				</div>

			</div>

			<div class="column left" id="column-2">

				<div class="column-content">
				
					<div class="column-title">Follow Us (RSS)</div>

					<ul class="plain-list">
						<li><a href="#" class="feed">Lorem ipsum</a></li>
						<li><a href="#" class="feed">Dolor sit amet</a></li>
						<li><a href="#" class="feed">Consectetur</a></li>
						<li><a href="#" class="feed">Adipicing elit</a></li>
					</ul>

				</div>

			</div>

			<div class="column left" id="column-3">

				<div class="column-content">
				
					<div class="column-title">Help &amp; Support</div>

					<p>Quam velit dapibus quam, ornare suscipit tortor nisl ut tellus.</p>

					<a href="#">Frequently Asked Questions (FAQ) &#187;</a>
				
				</div>

			</div>

			<div class="column right" id="column-4">

				<div class="column-content">
				
					<div class="column-title">Get in touch</div>

					<p>Phone: +46 7152 5412<br/>Email: info@simplemagazine.com</p>

					<a href="#">Online contact form &#187;</a>

				</div>

			</div>

			<div class="clearer">&nbsp;</div>

		</div>

		<div id="footer">

			<div class="left">&copy; 2010-2011 Simple Magazine <span class="text-separator">&rarr;</span> <a href="#">Home</a> <span class="text-separator">|</span><a href="#">News</a> <span class="text-separator">|</span> <a href="#">Politics</a> <span class="text-separator">|</span> <a href="#">Culture</a> <span class="text-separator">|</span> <a href="#">Sport</a> <span class="text-separator">|</span> <a href="#">Debate</a> <span class="text-separator">|</span> <a href="#">Entertainment</a></div>
			<div class="right">Provided By <a href="http://www.template4all.com/" title="Free Website Templates">Free Website Templates</a> | <a href="http://www.freethemes4all.com" title="Free Website Templates">Freethemes4all.com</a> Design by <a href="http://arcsin.se/">Arcsin</a></div>

			<div class="clearer">&nbsp;</div>

		</div>

	</div>
</div>

</body>
</html>